<template>
  <div class="app-container task">
    <el-form :model="queryParam" ref="queryForm" :inline="true"  style="text-align: center;">
      <el-row style="margin: auto; width: 100%; text-align: center; height: 37px;">
          <h1 style="display: inline-block; margin-top: -4px; text-align: center; color: #8b836c; font-size: 1.5rem; letter-spacing: 1px; font-family: serif;">考试管理列表</h1>
      </el-row>
      <el-row style="transform: scale(0.9)">
        <el-form-item label="标题：" prop="examName">
          <el-select v-model="queryParam.examId" filterable placeholder="请选择（或输入）考试标题" clearable>
            <el-option
              v-for="item in taskTitleList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              :title="item.name">
              <span>{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态：" class="empStatus">
          <el-select v-model="queryParam.examStatus" placeholder="考试状态" clearable>
            <el-option v-for="item in taskStatus" :key="item.key" :value="item.key"
                      :label="item.value"
                      :title="item.value">
                      <span>{{ item.value }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类：" prop="category">
          <el-autocomplete
            v-model="queryParam.examCategory"
            class="inline-input"
            :fetch-suggestions="querySearch0"
            placeholder="请选择（或输入）考试分类"
            style="cursor: pointer"
            @keyup.native="fuzzyqueryJob($event,input)"
          />
        </el-form-item>
      </el-row>
      <el-row style="transform: scale(0.9)">
        <el-form-item label="考试创建时间：">
          <el-date-picker v-model="queryParam.createTimeArr" value-format="yyyy-MM-dd" type="daterange"
                          range-separator="至" start-placeholder="起始时间" end-placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="考试类型：" prop="category">
          <el-select v-model="queryParam.examType" filterable placeholder="请选择（或输入）考试类型" clearable>
            <el-option
              v-for="item in relaPaperTpFixList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              :title="item.name">
              <span>{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联试卷名称：" prop="category">
          <el-select v-model="queryParam.paperId" filterable placeholder="请选择（或输入）试卷名称" clearable>
            <el-option
              v-for="item in relaPaperList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              :title="item.name">
              <span>{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-form-item style="margin-right: 12px; margin-bottom: 3px">
        <el-button class="resetBtn" size="small" @click="resetForm">重置</el-button>
      </el-form-item>
      <el-form-item style="margin-right: 12px; margin-bottom: 3px">
        <el-button class="add2Btn" size="small" @click="$router.push('/task/release')">考试发布</el-button>
      </el-form-item>
      <el-form-item style=" margin-bottom: 8px">
        <el-button size="small" class="qryBtn" @click="submitForm">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="listLoading"
      :data="tableData"
      fit
      highlight-current-row
      style="
        width: 99.2%;
        border: 1px solid rgb(220, 223, 230);
        margin-bottom: 12px;
        border-radius: 10px;
        over-flow: auto;
      "
      max-height="500px"
      :header-cell-style="{
        'color':'#ffffff',
        'border-bottom-radius': '1px',
        'font-size':'0.86rem',
        'height':'8px',
        'font-family': 'serif',
        'font-weight': '800',
        'background': '#a2997f',
        'border-right-color': '#b6b6b1',
        'border-bottom-color': '#b6b6b1',
        'border-width': '1.2px'
      }"
      border
    >
      <el-table-column  label="操作" align="center"  width="200px" fixed="left">
        <template slot-scope="{row}">
          <el-button size="mini" type="info" @click="popConfirmWindowFun('关闭考试确认窗口', 3, row.examId)" >关闭</el-button>
          <el-button size="mini" class="detailBtn" @click="popConfirmWindowFun('开启考试确认窗口', 1, row.examId)" >开启</el-button>
          <router-link target="_blank" :to="{ path: '/answer/truelist', query:{ examId: row.examId, jump: true }}" style="margin-left: 10px">
            <el-button size="mini" class="lightOrangeBtn">查看成绩</el-button>
          </router-link>
          <el-button size="mini" class="add2Btn" @click="popUnexaminedWindow(row.examId, row.examName)" >查看未考名单</el-button>
          <el-button size="mini" class="brownBtn" @click="sendTaskRanking(row.examId)" >一键发送考试排名</el-button>
          <el-button size="mini" class="addBtn" @click="sendExamRebuild(row.examId)" >一键补考</el-button>
          <router-link target="_blank" :to="{ path: '/task/addStu', query:{ examId: row.examId, exNm: row.examName }}" style="margin-left: 10px">
            <el-button size="mini" class="qryBtn">追加考试员工</el-button>
          </router-link>
          <el-button size="mini" class="deleteBtn link-left" @click="popConfirmWindowFun('删除考试确认窗口', 2, row.examId)" >删除</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="examId" label="考试编号"  width="90" />
      <el-table-column prop="examName" label="考试标题" width="280" fixed="left" />
      <el-table-column prop="examCategory" label="考试类型"   width="100" fixed="left">
        <template slot-scope="scope">
          <el-tag type="primary" v-if="scope.row.examType == 1">固定考试</el-tag>
          <el-tag type="success" v-if="scope.row.examType == 4">时段考试</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="limitCount" label="限考次数"  width="80" />
      <el-table-column prop="credit" label="学分" width="70" />
      <el-table-column prop="examStatus" label="考试状态"  width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.examStatus == 0" type="danger">正在考试</el-tag>
          <el-tag v-if="scope.row.examStatus == 1" type="info">等待考试</el-tag>
          <el-tag v-if="scope.row.examStatus == 2" type="success">已结束</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="paperName" label="关联试卷名称" width="280"/>
      <el-table-column prop="examStartTime" label="考试开始时间"  width="150" />
      <el-table-column prop="examEndTime" label="考试结束时间"  width="150" />
      <el-table-column label="展示解析" prop="showAnalysis" width="80">
          <template slot-scope="{row}">
            <el-switch
            :value="row.showAnalysis"
              active-color="#13CE66"
              inactive-color="#d4d4d4"
              :active-value='true'
              :inactive-value='false'
              @change="transSta(row, 'ana', row.showAnalysis)"
            >
            </el-switch>
          </template>
        </el-table-column>
      <el-table-column label="展示答案" prop="showCorrectAnswer" width="80">
        <template slot-scope="{row}">
          <el-switch
            :value="row.showCorrectAnswer"
            active-color="#13CE66"
            inactive-color="#d4d4d4"
            :active-value='true'
            :inactive-value='false'
            @change="transSta(row, 'ans', row.showCorrectAnswer)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="teacherName" label="授课人员"  width="92"/>
      <el-table-column prop="teacherTime" label="发布时间" width="180" />
      <el-table-column prop="examCreateTime" label="创建时间" width="150" />
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParam.pageNum" :limit.sync="queryParam.pageSize"
                @pagination="search"/>


    <el-dialog :title="poptitle" :visible.sync="popConfirmWindow" class="proaddWindow22" style="font-family: serif !important; top: 100px; position: absolute; border-radius: 26px !important;" width="400px" center append-to-body>
      <el-form label-width="230px" style="width: 60%">
        <el-form-item label="是否企业微信通知：" required>
          <el-switch
            v-model="QywxButtonOpen"
            active-color="#1890ff"
            inactive-color="#d4d4d4">
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="height: 40px">
        <el-button type="success" @click="closePop" style="margin-right: 12px;">取消</el-button>
        <el-button type="primary" @click="submitPopForm">确认</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="poptitle2" :visible.sync="popConfirmWindow2" class="proaddWindow22" style="font-family: serif !important; top: 100px; position: absolute; border-radius: 26px !important;" width="700px" center append-to-body>
      <el-form :model="popParam2" ref="popForm2" label-width="230px" style="width: 60%" :rules="rules2">
        <el-form-item label="补考限制次数：" required>
          <el-input-number v-model="popParam2.limitCount" :precision="0" :step="1"  :min="0" :max="1000000000"></el-input-number>
        </el-form-item>
        <el-form-item label="补考时间段：" required>
          <el-date-picker v-model="popParam2.limitDateTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
                          range-separator="至" start-placeholder="起始时间" end-placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="height: 40px">
        <el-button type="success" @click="closePop2" style="margin-right: 12px;">取消</el-button>
        <el-button type="primary" @click="submitPopForm2">确认</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="unexaminedTitle" :visible.sync="unexaminedPop" class="popJobTotalInfo" style="font-family: serif !important; border-radius: 18px;" center append-to-body>
      <el-form ref="TotalEmployeeInfo" label-width="118px" style="display: flex; justify-content: center; align-items: center">
        <div style="white-space: pre; height: 290px; width: 500px; overflow: auto; margin: 0 auto; display: flex; justify-content: center; align-items: center; font-size: 1.1rem; line-height: 22px;">
          <span style=" height: 290px;">{{ unexaminedStr }}</span>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" style="margin-right: 8px !important;" @click="closeUnexaminedWindow">关 闭</el-button>
        <el-button type="success" style="margin-right: 12px !important;" @click="unexaminedNotice">一键发送提醒</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import Pagination from '@/components/Pagination'
import taskApi from '@/api/task'
import paperApi from '@/api/examPaper'

export default {
  components: { Pagination },
  data () {
    return {
      rules2: {
        limitCount: [
          { required: true, message: '请输入补考限制次数', trigger: 'blur' }
        ],
        limitDateTime: [
          { required: true, message: '请选择补考时间段', trigger: 'blur' }
        ]
      },
      noticeId: undefined,
      unexaminedListLength: undefined,
      unexaminedStr: '',
      unexaminedPop: false,
      unexaminedTitle: '',
      popParam: {
        id: undefined,
        notice: undefined
      },
      popParam2: {
        examId: undefined,
        limitCount: undefined,
        limitDateTime: undefined
      },
      QywxButtonOpen: true,
      poptitle: '',
      poptitle2: '',
      busiTp: undefined,
      popConfirmWindow: false,
      popConfirmWindow2: false,
      relaPaperList: [],
      relaPaperTpList: [],
      categoryList: [],
      taskTitleList: [],
      queryParam: {
        examId: undefined,
        examStatus: undefined,
        examCategory: undefined,
        paperId: undefined,
        createTimeArr: [],
        examStartTime: undefined,
        examEndTime: undefined,
        pageNum: 1,
        pageSize: 10,
        paperType: undefined,
        paperCategory: undefined
      },
      listLoading: true,
      tableData: [],
      total: 0,
      titleList: [],
      taskStatus: [
        { key: 0, value: "正在考试" },
        { key: 1, value: "等待考试" },
        { key: 2, value: "已结束" }
      ],
      relaPaperTpFixList: [
        { id: 1, name: '固定考试' },
        { id: 4, name: '时段考试' }
      ]
    }
  },
  created () {
    this.loadAll()
    this.search()
  },
  methods: {
    transSta(row, type, val) {
      let _this = this, params
      if (type == 'ana') {
        params = { examId: row.examId, showAnalysis: !val }
        taskApi.anaTrans(params).then(res => {
          if (res.code === 1) {
            this.search()
            if (row.showAnalysis == false) {
              _this.$message.success('考试【' + row.examName + '】“解析展示” 已开启 ！')
            } else {
              _this.$message.success('考试【' + row.examName + '】“解析展示” 已关闭 ！')
            }
          } else {
            _this.$message.error(res.message)
            this.search()
          }
        }).catch(err =>  {
          console.log('error:', err)
          _this.search()
        }).finally(() => {
          _this.search()
        })
      } else {
        params = { examId: row.examId, showCorrectAnswer: !row.showCorrectAnswer }
        taskApi.ansTrans(params).then(res => {
          if (res.code === 1) {
            this.search()
            if (row.showCorrectAnswer == false) {
              _this.$message.success('考试【' + row.examName + '】“答案展示” 已开启 ！')
            } else {
              _this.$message.success('考试【' + row.examName + '】“答案展示” 已关闭 ！')
            }
          } else {
            _this.$message.error(res.message)
            this.search()
          }
        }).catch(err =>  {
          console.log('error:', err)
          _this.search()
        }).finally(() => {
          _this.search()
        })
      }
    },
    resetForm() {
      this.queryParam = {
        examId: undefined,
        examStatus: undefined,
        examCategory: undefined,
        paperId: undefined,
        createTimeArr: [],
        examStartTime: undefined,
        examEndTime: undefined,
        pageNum: 1,
        pageSize: 10,
        paperType: undefined,
        paperCategory: undefined
      }
      this.search()
    },
    resetPopParams() {
      this.popConfirmWindow = false
      this.popParam = {
        id: undefined,
        notice: undefined
      }
      this.QywxButtonOpen = true
    },
    resetPopParams2() {
      this.popConfirmWindow2 = false
      this.popParam2 = {
        examId: undefined,
        limitCount: undefined,
        limitDateTime: undefined
      }
    },
    unexaminedNotice() {
      taskApi.notice({ examId: this.noticeId }).then(data => {
        const re = data.response
        if (data.code == 1) {
          this.$message({
            type: 'success',
            message: '未考提醒企业微信推送成功！'
          })
        } else {
          this.$message({
            type: 'warning',
            message: '后台处理异常，请稍后重试或联系系统管理员！'
          })
          return
        }
      })
    },
    closeUnexaminedWindow() {
      this.unexaminedPop = false
    },
    closePop() {
      this.resetPopParams()
      this.popConfirmWindow = false
    },
    closePop2() {
      this.resetPopParams2()
      this.popConfirmWindow2 = false
    },
    sendExamRebuild(examId) {
      this.poptitle2 = '一键补考'
      this.popParam2.examId = examId
      this.popConfirmWindow2 = true
    },
    sendTaskRanking(examid) {
      let _this = this
      taskApi.noticeExamRank(examid).then(res => {
        if (res.code === 1) {
          _this.$message.success('成绩排名信息批量发送成功！')
        } else {
          _this.$message.error(res.message)
        }
      }).catch(err =>  {
        _this.$message({
          type: 'warning',
          message: res.message
        })
      }).finally(() => {
      })
    },
    submitPopForm() {
      let _this = this
      this.popParam.notice = this.QywxButtonOpen
      if (this.busiTp == 3) { // 关闭考试
        taskApi.closeTask(this.popParam).then(res => {
          if (res.code === 1) {
            _this.$message.success('关闭成功！')
            this.closePop()
            this.search()
          } else {
            _this.$message.error(res.message)
            this.search()
            this.closePop()
          }
        }).catch(err =>  {
          _this.$message({
            type: 'warning',
            message: res.message
          })
          _this.search()
          _this.closePop()
        }).finally(() => {
          this.search()
          this.closePop()
        })
      } else if (this.busiTp == 2) { // 删除考试
        taskApi.delTask(this.popParam).then(res => {
          if (res.code === 1) {
            _this.$message.success('删除成功！')
            this.closePop()
            this.search()
          } else {
            _this.$message.error(res.message)
            this.search()
            this.closePop()
          }
        }).catch(err =>  {
          _this.$message({
            type: 'warning',
            message: res.message
          })
          _this.search()
          _this.closePop()
        }).finally(() => {
          this.search()
          this.closePop()
        })
      } else if (this.busiTp == 1) { // 开启考试
        taskApi.openTask(this.popParam).then(res => {
          if (res.code === 1) {
            _this.$message.success('开启成功！')
            this.closePop()
            this.search()
          } else {
            _this.$message.error(res.message)
            this.search()
            this.closePop()
          }
        }).catch(err =>  {
          _this.$message({
            type: 'warning',
            message: res.message
          })
          _this.search()
          _this.closePop()
        }).finally(() => {
          this.search()
          this.closePop()
        })
      }
    },
    submitPopForm2() {
      let _this = this
      this.$refs.popForm2.validate((valid) => {
        if (valid) {
          taskApi.sendRebuild(this.popParam2).then(res => {
            if (res.code === 1) {
              _this.$message.success('提交成功！')
              this.closePop2()
              this.search()
            } else {
              _this.$message.error(res.message)
              this.search()
              this.closePop2()
            }
          }).catch(err =>  {
            _this.$message({
              type: 'warning',
              message: res.message
            })
            _this.search()
            _this.closePop2()
          }).finally(() => {
            this.search()
            this.closePop2()
          })
        } else {
          return false
        }
      })
    },
    popUnexaminedWindow(examid, examNm) {
      let _this = this
      this.noticeId = examid
      taskApi.unexamined({ examId: examid }).then(res => {
        if (res.code === 1) {
          this.unexaminedListLength = res.response.length
          this.unexaminedStr = '未考人员总数：' + this.unexaminedListLength + '人' + '\n\n'
          res.response.forEach((item, index) => {
            if ((index + 1) < res.response.length) {
              this.unexaminedStr += index + 1 + '.  ' + item.name + '\n'
            } else {
              this.unexaminedStr += index + 1 + '.  ' + item.name
            }
          })
          this.unexaminedList = res.response
          this.unexaminedTitle = '【' +examNm + '】未考人员名单'
          this.unexaminedPop = true
        } else {
          _this.$message.error(res.message)
          this.search()
          this.closePop()
        }
      }).catch(err =>  {
        _this.$message({
          type: 'warning',
          message: '处理异常，请联系管理员或稍后再试！'
        })
        _this.search()
        _this.closePop()
      }).finally(() => {
        this.search()
        this.closePop()
      })
    },
    popConfirmWindowFun(title, type, id) {
      this.poptitle = title
      this.busiTp = type
      this.popParam.id = id
      this.QywxButtonOpen = true
      this.popConfirmWindow = true
    },
    search () {
      this.listLoading = true
      if (this.queryParam.createTimeArr.length > 0) {
        this.queryParam.examStartTime = this.queryParam.createTimeArr[0]
        this.queryParam.examEndTime = this.queryParam.createTimeArr[1]
      }
      taskApi.pageList(this.queryParam).then(data => {
        const re = data.response
        this.tableData = re.list
        this.total = re.total
        this.queryParam.pageNum = re.pageNum
        this.listLoading = false
      })
    },
    fuzzyqueryJob(e, input) {
      if (this.queryParam.examCategory !== '' && this.queryParam.examCategory !== null && this.queryParam.examCategory !== undefined) {
        const jobParam = { keyword: this.queryParam.examCategory + '' }
        taskApi.getTaskCategorys(jobParam).then(res => {
          this.categoryList = res.response
        })
      }
    },
    fuzzyqueryJob1(e, input) {
      if (this.queryParam.paperType !== '' && this.queryParam.paperType !== null && this.queryParam.paperType !== undefined) {
        const jobParam = { keyword: this.queryParam.paperType + '' }
        paperApi.paperCategoryFilter(jobParam).then(res => {
          this.relaPaperTpList = res.response
        })
      }
    },
    createFilter(queryString) {
      return returnJobs => {
        return (
          returnJobs.toLowerCase().indexOf(queryString.toLowerCase()) !== -1 // 改为===0 就是筛选的数据只是首字匹配的列表项，需要包含输入字的所有列表项改为！==-1
        )
      }
    },
    loadAll() {
      taskApi.getTaskCategorys().then(res => {
        const categoryList = res.response
        this.categoryList = categoryList
      })

      taskApi.titleFilter().then(res => {
        this.taskTitleList = res.response
      })

      paperApi.paperNmFilter().then(res => {
        this.relaPaperList = res.response
      })

      // paperApi.paperCategoryFilter().then(res => {
      //   this.relaPaperTpList = res.response
      // })
    },
    querySearch0(queryString, cb) {
      const categorylist = this.categoryList
      let results = queryString
        ? categorylist.filter(this.createFilter(queryString))
        : categorylist
      results = results.map(item => {
        return {
          value: item
        }
      })
      cb(results)
    },
    querySearch1 (queryString, cb) {
      const categorylist = this.relaPaperTpList
      let results = queryString
        ? categorylist.filter(this.createFilter(queryString))
        : categorylist
      results = results.map(item => {
        return {
          value: item
        }
      })
      cb(results)
    },
    submitForm () {
      this.queryParam.pageNum = 1
      this.search()
    },
    deleteTask (row) {
      let _this = this
      taskApi.deleteTask(row.id).then(re => {
        if (re.code === 1) {
          _this.search()
          _this.$message.success(re.message)
        } else {
          _this.$message.error(re.message)
        }
      })
    },
    levelFormatter  (row, column, cellValue, index) {
      return this.enumFormat(this.levelEnum, cellValue)
    }
  },
  computed: {
    ...mapGetters('enumItem', ['enumFormat']),
    ...mapState('enumItem', {
      levelEnum: state => state.user.levelEnum
    })
  }
}
</script>

<style rel="stylesheet/scss" lang='scss'>
.task .el-date-editor .el-range-separator {
  display: inline-block;
  height: 100%;
  padding: 0 0px;
  margin: 0;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  width: 5%;
  color: #303133;
}

.task .el-form-item--medium .el-form-item__label {
  line-height: 36px;
  margin-left: 15px;
}

.task .el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 0px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.task .el-button--mini {
  padding: 7px 15px;
  font-size: 12px;
  border-radius: 3px;
  margin-bottom: 5px;
  margin-top: 8px;
}

.proaddWindow22 .el-dialog {
  -webkit-transform: none;
  transform: none;
  left: 0;
  position: relative;
  margin: 0 auto;
  border-radius: 20px;
}

.proaddWindow22 .el-dialog--center .el-dialog__body {
  text-align: center;
  padding: 20px 20px 23px;
}

.proaddWindow22 .friendlyNotice {
 font-family: serif;
  width: 100px;
  top: 12px;
  position: relative;
  font-size: 1.1rem;
  letter-spacing: 2.8px;
  background-image: linear-gradient(to right top, #13729c, #1dafef, #016692);
  background-image: -webkit-linear-gradient(to right top, #13729c, #1dafef, #016692);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  &:hover {
    background-image: linear-gradient(to right top, #0c374a, #24b2ef, #00405c);
    background-image: -webkit-linear-gradient(to right top, #0c374a, #24b2ef, #00405c);
  }
}

.proaddWindow22 .el-dialog__title {
  line-height: 24px;
  font-size: 18px;
  color: #000000;
}

.popJobTotalInfo  .el-form-item--medium .el-form-item__content, .popJobTotalInfo  .el-form-item--medium .el-form-item__label {
  line-height: 36px;
  font-size: 0.95rem !important;
  color: #707070;
}

.popJobTotalInfo  .el-button--primary {
  background-color: rgb(24, 144, 255) !important;
}

.popJobTotalInfo  .el-radio__label {
  padding-left: 2px;
  font-size: 0.94rem;
}

.popJobTotalInfo  .el-radio__input.is-checked+.el-radio__label {
  color: #1c7cd7;
  font-size: 0.94rem;
}

.popJobTotalInfo  .el-radio__input.is-checked .el-radio__inner {
  border-color: #1c7cd7;
  background: #7cbbf7;
}

.popJobTotalInfo  .el-dialog--center .el-dialog__footer {
  text-align: inherit;
  position: relative;
  height: 56px;
}

.popJobTotalInfo  .el-dialog--center {
  text-align: center;
  width: 556px;
  border-radius: 20px;
}

.popJobTotalInfo  .el-dialog__footer .dialog-footer {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}

.popJobTotalInfo .el-form-item__error {
  color: #ff4949;
  font-size: 12px;
  line-height: 1;
  padding-top: 0px;
  position: absolute;
  top: 100%;
  left: 0;
}

.task .empStatus .el-input--medium .el-input__inner {
  height: 36px;
  width: 127px;
  line-height: 36px;
}

.task .el-row {
    height: 50px;
    text-align: center;
}

.task .el-pagination {
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-weight: bold;
  text-align: center;
}

</style>
